var createBy = localStorage.getItem("username");
var dataPacketFileName = localStorage.getItem('dataPacketFileName');
const ComponentDetails = (() => {
  if (!document.getElementById('details-style')) {
    const style = document.createElement('style');
    style.id = 'details-style';  // 添加唯一ID
    style.textContent = `
   .details-container {
       width: 100%;
       height: 100vh;
       overflow: hidden;
       position: relative;
   }
 
   .content-frame {
       width: 100%;
       height: calc(100% - 85px);
       border: none;
       display: block;
   }
   .page-header {
        height: 85px;
        background-position-y: 10px;
        background: url('./img/muen_header_bg.png') no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        background-position-y: -5px;
    }    
    .page-header .home_icon{
        position: absolute;
        right: 78px;
        top: 16px;
        cursor: pointer;
        width: 33px;
        height: 33px;
    }
    .suoding {
        position: absolute;
        right: 146px;
        max-width: 40px;
        top: 12px;
        border-radius: 23px;
        cursor: pointer;
    }
    .suoding img {
        width: 100%;
    }

    ._logout{
        cursor: pointer;
        position: absolute;
        top: 12px;
        left: 48px;
        box-sizing: border-box;
        border-radius: 50%;
        z-index: 12;
        top: 17px;
        left: 83px;
        background-color: #3a73e6;
        padding: 2px 6px 3px 5px;
        border-radius: 20px;
    }
    ._logout img{
        width: 17px;
        height: 17px;
    }
   `;
    document.head.appendChild(style);
  }
  return {
    template: `
      <div class="details-container">
          <header class="page-header">
              <div class="header-content">
                  <h1 id="header_title">交互式电子技术手册</h1>
              </div>
              <div class="nav_list">
                <li class="_left" @click="onCollect()">{{ isCollect ? '左侧展开' : '左侧收起' }}</li>
                <li class="_left quxian"><span class="_tui" @click="operation(0)">后退</span> <span class="xiexian">/</span> <span class="_qian" @click="operation(1)">前进</span></li>
                <li class="_left" @click="goHome()">主页</li>
                <li class="kong"></li>
                <li class="_right history" @click="onHistory()">历史记录 <div id="history_list" tabindex="1"></div></li>
                <li class="_right remarks" @click="onRemarks()">备注 <div id="remarks_list" tabindex="2"></div></li>
                <li class="_right" @click="shuoding()">锁屏</li>
              </div>
              
              <div class="btn_box">
                  <span>{{ userName }}</span>
                  <div class="logout-box">
                      <button type="button" class="layui-btn layui-btn-sm  layui-btn-radius"  onclick="modifyPassword()">修改密码</button>
                      <button type="button" class="layui-btn layui-btn-sm  layui-btn-radius"  @click="logout()">退出登录</button>
                  </div>
              </div>
          </header>
          <iframe 
              ref="contentFrame"
              :src="iframeSrc"
              frameborder="0"
              id="contentFrame"
              @load="handleIframeLoad"
              class="content-frame"
              style="width: 100%;"
          ></iframe>
      </div>
  `,
    data() {
      return {
        iframeSrc: '',
        userName: '',
        dmPath: '',
        observer: null,
        isCollect: false,
        remarkId: ''
      };
    },
    watch: {
      '$route'(to, from) {
        console.log(to.query, '3213901803');
        if (to.query.dmName) {
          const dmurl = to.query.dmName;
          const id = to.query.id;
          const outerIframe = $('#contentFrame'); // 外层 iframe

          // 等待外层 iframe 加载完成后
          if (outerIframe) {


            const outerDoc = outerIframe.contents(); // 获取外层 iframe 的文档对象
            const innerIframe = outerDoc.find('#myFrame'); // 查找外层 iframe 中的内层 iframe
            // 设置内层 iframe 的 src 属性
            innerIframe.attr('src', dmurl + '.html'); // 替换为实际路径
            let _this = this;
            console.log(237193193, '3801830129');
            if (id) {
              // 等待内层 iframe 加载完成后滚动到指定元素锚点
              innerIframe.on('load', function () {
                const innerDoc = innerIframe.contents(); // 获取内层 iframe 的文档对象
                const targetElement = innerDoc.find('#' + id); // 替换为实际的目标元素 ID
                if (targetElement.length) {
                  setTimeout(function () {
                    console.log('8321631031831097321');

                    const elementPosition = targetElement[0].getBoundingClientRect().top + innerIframe[0].contentWindow.scrollY;
                    const iframeHeight = innerIframe.height();
                    const scrollToPosition = elementPosition - (iframeHeight / 2) + (targetElement[0].offsetHeight / 2);
                    innerIframe[0].contentWindow.scrollTo({ top: scrollToPosition, behavior: 'smooth' });
                  }, 200);
                }
              });
            }
          };
        }
        // 当路由变化时执行的代码
        // this.dmPath = to.query.dmName; // 更新 dmPath
        // this.iframeSrc = './data/' + to.query.path + "/indexNav.html"; // 更新 iframeSrc
        // 这里可以添加其他需要在路由变化时执行的逻辑
      }
    },
    created() {
      localStorage.setItem('isCollect', 'false');
      // 监听窗口大小变化，调整 iframe 的高度
      // this.observer = new ResizeObserver(() => {
      //   this.$refs.contentFrame.style.height = window.innerHeight + 'px';
      // });
      // this.observer.observe(this.$refs.contentFrame);
      this.userName = localStorage.getItem('username');
      this.remarkId = this.$route.query.id || '';
      console.log(this.$route.query, 'query');
      this.dmPath = this.$route.query.dmName;
    },
    mounted() {
      localStorage.setItem('dataPacketFileName', this.$route.query.path);
      this.iframeSrc = './data/' + this.$route.query.path + "/indexNav.html";
      window.openP3d = (src, scenceName) => {
        window.open(`/ietmData/js/P3DToolkit/P3DToolkit.html?/ietmData/data/${this.$route.query.path}/illustrations/${src}.p3d&${scenceName}`, '_blank')
        // nginx
        // window.open(`/js/P3DToolkit/P3DToolkit.html?/data/${this.$route.query.path}/illustrations/${src}.p3d`, '_blank')
      }
    },
    methods: {
      onCollect() {
        this.isCollect = !this.isCollect;
        // if(this.isCollect){
        //   $('.left_box').css('display','none');
        // }else{
        //   $('.left_box').css('display','block');
        // }
        localStorage.setItem('isCollect', this.isCollect);
        if (this.isCollect) {
          const outerIframe = $('#contentFrame'); // 外层 iframe
          // 等待外层 iframe 加载完成后
          if (outerIframe) {
            const outerDoc = outerIframe.contents(); // 获取外层 iframe 的文档对象
            const treeDom = outerDoc.find('.ztree_box');
            treeDom.hide();
            outerDoc.find('#htmlBrowse').css({ width: '100%' })

          };
        } else {
          const outerIframe = $('#contentFrame'); // 外层 iframe
          // 等待外层 iframe 加载完成后
          if (outerIframe) {
            const outerDoc = outerIframe.contents(); // 获取外层 iframe 的文档对象
            const treeDom = outerDoc.find('.ztree_box');
            treeDom.show();
            outerDoc.find('#htmlBrowse').css({ width: '76%' })

          };
        }
      },
      logout() {
        let _this = this;
        layer.confirm('是否确认退出登录?', function (index) {
          $.ajax({
            type: "POST",
            url: '/ietm/logout',
            success: function (res) {
              if (res.code == 200) {
                layer.msg('退出成功 !');
                document.cookie = "systemToken=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // 删除cookie中的token
                sessionStorage.removeItem('systemToken');
                localStorage.removeItem('username');
                localStorage.removeItem('userInfo');

                localStorage.removeItem('dataModuleFileName');
                localStorage.removeItem('dataModuleName');
                localStorage.removeItem('dataPacketFileName');
                localStorage.removeItem('isCollect');
                _this.$router.push('/login')
              } else {
                layer.msg('退出失败 !');
              }
            }, error: function (res) {
              layer.msg('退出失败 !');
            }
          })
          layer.close(index);
        })
      },
      handleIframeLoad() {
        console.log('iframe loaded');
        let _this = this;

        if (this.dmPath) {
          const dmurl = this.dmPath;
          const outerIframe = $('#contentFrame'); // 外层 iframe
          // 等待外层 iframe 加载完成后
          outerIframe.on('load', function () {
            const outerDoc = outerIframe.contents(); // 获取外层 iframe 的文档对象
            const innerIframe = outerDoc.find('#myFrame'); // 查找外层 iframe 中的内层 iframe

            // 设置内层 iframe 的 src 属性
            innerIframe.attr('src', dmurl + '.html'); // 替换为实际路径
            if (_this.remarkId) {
              // 等待内层 iframe 加载完成后滚动到指定元素锚点
              innerIframe.on('load', function () {
                const innerDoc = innerIframe.contents(); // 获取内层 iframe 的文档对象
                const targetElement = innerDoc.find('#' + _this.remarkId); // 替换为实际的目标元素 ID
                if (targetElement.length) {
                  setTimeout(function () {
                    console.log('8321631031831097321');

                    const elementPosition = targetElement[0].getBoundingClientRect().top + innerIframe[0].contentWindow.scrollY;
                    const iframeHeight = innerIframe.height();
                    const scrollToPosition = elementPosition - (iframeHeight / 2) + (targetElement[0].offsetHeight / 2);
                    innerIframe[0].contentWindow.scrollTo({ top: scrollToPosition, behavior: 'smooth' });
                  }, 200);
                }
              });
            }
          });
        }
      }
    },

  };
})();
